import React, { PureComponent } from 'react'
import { connect } from 'dva';
import PageHeaderLayout from '@/layouts/PageHeaderLayout';
import TemplateCard from '@/support/components/TemplateCard'
import { routerRedux } from 'react-router-dom';
import PropTypes from 'prop-types';
import {Form, Card, Row, Col, Select, Input, DatePicker, Button, Table, message, Radio} from 'antd';
import * as G from '@/utils/common';
import TableFormField from './TableFormField';
import AddModal from './addModal';
import GroupsModal from './groupsModal';
import styles from './index.less';

const FormItem = Form.Item;
const formItemLayout = {
  labelCol: {
    xs: { span: 0 },
    sm: { span: 0 },
  },
  wrapperCol: {
    xs: { span: 8 },
    sm: { span: 8 },
  },
};
@connect((state) => ({
  menu: state.menu,
  fieldSetting: state.fieldSetting,
  fieldManage: state.fieldManage,
  common: state.common,
}))
// @Form.create()
export default class fieldManage extends PureComponent {
  static contextTypes = {
    authButton: PropTypes.array,
    dicData: PropTypes.object,
  }
  formRef = React.createRef();
  state = {
    modalVisible: false, // 新增字段弹窗
    groupsModalVisible: false, // 新增字段弹窗
  }
  constructor(props) {
    super(props)
    // 创建Ref
    this.childRef = React.createRef();
  }
  componentDidMount() {
    this.init();
    this.refreshPage();
  }
  init = () => {
    const { dispatch } = this.props;
    dispatch({
      type: 'fieldManage/clearData',
      payload:{},
    });
  }
  // 重置
  handleFormReset = () => {
    // const {form, dispatch} = this.props;
    // form.resetFields();
    this.formRef.current.resetFields();
    this.childRef.getList();
  }
  // 查询
  handleSearch = (e) => {
    e.preventDefault();
    this.formRef.current.validateFields().then((fieldsValue) => {
    this.childRef.handleSearch(fieldsValue);
  })
  }
 // 新增字段弹窗-打开
  addFieldModal = () => {
    this.setState({
      modalVisible: true,
    });
  };
  // 新增字段弹窗-关闭
  closeModal = () => {
    this.setState({
      modalVisible: false,
    });
    this.childRef.getList();
    this.refreshPage();
  }
  refreshPage() {
      const { dispatch } = this.props;
      dispatch({
        type: 'fieldSetting/settingCount',
        payload: {
          url: '/mscreditbusiness/credit/field/setting/count',
        },
      });
      dispatch({
        type: 'fieldSetting/groupList',
        payload: {
          url: '/mscreditbusiness/credit/field/group/list',
        },
      });
      this.childRef.getList();
  }
  // 获取字段分组、新增字段数量，给子组件用
  getNum = () =>{
    const { dispatch } = this.props;
    dispatch({
      type: "fieldSetting/settingCount",
      payload: {
        url: "/mscreditbusiness/credit/field/setting/count",
      },
    });
    dispatch({
      type: "fieldSetting/groupList",
      payload: {
        url: "/mscreditbusiness/credit/field/group/list",
      },
    });
}

  render() {
    const {menu: { permissions }} = this.props;
    const {location: { pathname }} = this.props;
    const isGroup = permissions.includes(pathname + '/' + 'fieldManage_group');
    const isField = permissions.includes(pathname + '/' + 'fieldManage_field');
    const isEnable = permissions.includes(pathname + '/' + 'fieldManage_enable');
    const isUpdate = permissions.includes(pathname + '/' + 'fieldManage_update');
    const isDel = permissions.includes(pathname + '/' + 'fieldManage_del');
    const isUnable = permissions.includes(pathname + '/' + 'fieldManage_unable');
    const isSet = permissions.includes(pathname + '/' + 'fieldManage_set');
    const isSave = permissions.includes(pathname + '/' + 'fieldManage_save');
    const isCancel = permissions.includes(pathname + '/' + 'fieldManage_cancel');
    // const {form: { getFieldDecorator }} = this.props;
    const {fieldSetting: { groupList,groupCount, fieldCount,},dispatch,} = this.props;
    // const groupList = [];
    // const groupCount = 0;
    // const fieldCount = 0;
    const { modalVisible,groupsModalVisible} = this.state;
    return (
      <PageHeaderLayout>
        <Card>
              <div className={styles.tableListForm}>
                <Form onSubmit={this.handleSearch} layout='inline' ref={this.formRef}>
                  <Row gutter={24} className={styles.my_searchRow}>
                    <Col span={8} key={"vin"}>
                       <FormItem
                         name={"name"}
                         label={"字段名称"}
                     >
                        <Input placeholder='请填写' style={{width: '100%'}}/>
                       </FormItem>
                    </Col>
                    <Col span={8} key={"groupId"}>
                      <FormItem
                        name={"groupId"}
                        label={"字段分组"}
                      >
                          <Select
                            placeholder='请选择'
                            optionFilterProp="children"
                            allowClear={true}
                            showSearch
                            getPopupContainer={triggerNode => triggerNode.parentNode}
                          >
                            {G.transferOption(groupList, ['uuid', 'name'])}
                          </Select>
                      </FormItem>
                    </Col>
                    <Col span={8}>
                  <span style={{ display: 'block', width: '100%', textAlign: 'right', paddingBottom : 10, float: 'right'}}>
                    <Button type="primary" onClick={(e) => this.handleSearch(e)} >查询</Button>
                    <Button style={{ marginLeft: 8 }} onClick={this.handleFormReset}>重置</Button>
                  </span>
                    </Col>
                  </Row>
                </Form>
                </div>
             </Card>
             <div className={styles.tableList}>
              <Card bordered={false}>
                {
                  isGroup ? (
                    <Button
                    type="primary"
                    style={{marginBottom: 10, marginRight: 10}}
                    onClick={() => this.setState({ groupsModalVisible: true })}
                  >
                    {`字段分组（${groupCount}/10）`}
                  </Button>
                  ) : null
                }
                {
                  isField ? (
                    <Button type='primary' style={{marginBottom: 10, marginRight: 10}}  onClick={()=>this.addFieldModal()}>新增字段{fieldCount}/100</Button>
                  ) : null
                }
                </Card>
                <TableFormField
                 isDel={isDel}
                 isEnable={isEnable}
                 isUpdate={isUpdate}
                 isUnable={isUnable}
                 isSet={isSet}
                 isSave={isSave}
                 isCancel={isCancel}
                 onRef={(childRef) => (this.childRef = childRef)}
                 dispatch={this.props.dispatch}
                 groupList={groupList}
                 getNum={this.getNum}
                />
                </div>
            <AddModal
            modalVisible={modalVisible}
            closeModal={this.closeModal}
            dispatch={this.props.dispatch}
            fieldNum={fieldCount}
            groupList={groupList}
          />
           {groupsModalVisible && (
           <GroupsModal
            visible={groupsModalVisible}
            changeVisible={() => {
              this.setState({ groupsModalVisible: false });
              this.refreshPage();
            }}
          />
            )}
      </PageHeaderLayout>
    )
  }
}
